import React,{useState} from 'react'
import '../style/css/compoments/header.css'
import {Row,Col,Menu} from 'antd'
import Router from 'next/router'
import {HomeOutlined,TagOutlined,WalletOutlined,UserOutlined
,ReadOutlined,ShareAltOutlined,ContainerOutlined
} from '@ant-design/icons';
const Header = (props) =>{
    const selectStatus = props.status
    const handleClick = e => {
        console.log('click ', e);
        if(e.key=='/'){
            Router.push('/')
        }else{
            Router.push('/'+e.key)
        }
      };
    return (
        <div className="header">
        {/* <div className="header-bg"></div> */}
        <Row type="flex" justify="center" className="header-div">
            <Col xs={24} sm={24} md={10} lg={10} xl={6}>
               <span className="logo"> <img src="" /></span>
               {/* <span className="logo-name">Sakura</span> */}
               <span className="logo-name">Jade</span>
            </Col>
            <Col className="menu-div" xs={0} sm={0} md={14} lg={14} xl={18}>
                <Menu mode="horizontal" selectedKeys={selectStatus} onClick={handleClick}>
                    <Menu.Item key="/" >
                        <HomeOutlined />
                        首页
                    </Menu.Item>
                    <Menu.Item key="type" >
                    <ContainerOutlined />
                        分类
                    </Menu.Item>
                    <Menu.Item key="tag">
                    <TagOutlined />
                        标签
                    </Menu.Item>
                    <Menu.Item key="file">
                    <WalletOutlined />
                        归档
                    </Menu.Item>
                    <Menu.Item key="about">
                    <UserOutlined />
                        关于我
                    </Menu.Item>
                    <Menu.Item key="commited">
                    <ReadOutlined />
                        留言板
                    </Menu.Item>
                    <Menu.Item key="BehanceOutlined">
                    <ShareAltOutlined />
                        友链
                    </Menu.Item>
                </Menu>
            </Col>
        </Row>
    </div>
    )
}
export default Header;